<template>
  <a-modal
    :open="open"
    :title="isEdit ? '编辑检验项目' : '添加检验项目'"
    width="800px"
    @ok="handleSave"
    @cancel="handleCancel"
    :confirm-loading="loading"
    @update:open="(value: boolean) => emit('update:open', value)"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical"
    >
      <!-- 基本信息 -->
      <div class="form-section">
        <h4>基本信息</h4>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="指标名称" name="name">
              <a-input
                :value="formData.name"
                @update:value="(value: string) => (formData.name = value)"
                placeholder="请输入指标名称"
                size="large"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="指标单位" name="unit">
              <a-input
                :value="formData.unit"
                @update:value="(value: string) => (formData.unit = value)"
                placeholder="请输入指标单位"
                size="large"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="标准名称" name="standardName">
              <a-input
                :value="formData.standardName"
                @update:value="
                  (value: string) => (formData.standardName = value)
                "
                placeholder="请输入标准名称"
                size="large"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="所属分类" name="categoryId">
              <a-select
                :value="formData.categoryId"
                @update:value="(value: string) => (formData.categoryId = value)"
                placeholder="请选择分类"
                size="large"
              >
                <a-select-option
                  v-for="category in categories"
                  :key="category.id"
                  :value="category.id"
                >
                  {{ category.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="描述" name="description">
          <a-textarea
            v-model:value="formData.description"
            placeholder="请输入描述信息"
            :rows="3"
            size="large"
          />
        </a-form-item>
      </div>

      <!-- 参考值设置 -->
      <div class="form-section">
        <h4>参考值设置</h4>

        <!-- 猫类 -->
        <div class="reference-section">
          <h5>猫类</h5>
          <a-row :gutter="16">
            <a-col :span="8">
              <div class="age-group">
                <label>幼年:</label>
                <div class="value-inputs">
                  <a-input-number
                    v-model:value="formData.referenceValues.cat.juvenile.min"
                    placeholder="最小值"
                    size="large"
                    style="width: 100%"
                  />
                  <span class="separator">-</span>
                  <a-input-number
                    v-model:value="formData.referenceValues.cat.juvenile.max"
                    placeholder="最大值"
                    size="large"
                    style="width: 100%"
                  />
                </div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="age-group">
                <label>成年:</label>
                <div class="value-inputs">
                  <a-input-number
                    v-model:value="formData.referenceValues.cat.adult.min"
                    placeholder="最小值"
                    size="large"
                    style="width: 100%"
                  />
                  <span class="separator">-</span>
                  <a-input-number
                    v-model:value="formData.referenceValues.cat.adult.max"
                    placeholder="最大值"
                    size="large"
                    style="width: 100%"
                  />
                </div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="age-group">
                <label>老年:</label>
                <div class="value-inputs">
                  <a-input-number
                    v-model:value="formData.referenceValues.cat.elderly.min"
                    placeholder="最小值"
                    size="large"
                    style="width: 100%"
                  />
                  <span class="separator">-</span>
                  <a-input-number
                    v-model:value="formData.referenceValues.cat.elderly.max"
                    placeholder="最大值"
                    size="large"
                    style="width: 100%"
                  />
                </div>
              </div>
            </a-col>
          </a-row>
          <div class="copy-paste-buttons">
            <a-button size="small" @click="copyValues('cat')">复制</a-button>
            <a-button size="small" @click="pasteValues('cat')">粘贴</a-button>
          </div>
        </div>

        <!-- 狗类 -->
        <div class="reference-section">
          <h5>狗类</h5>
          <a-row :gutter="16">
            <a-col :span="8">
              <div class="age-group">
                <label>幼年:</label>
                <div class="value-inputs">
                  <a-input-number
                    v-model:value="formData.referenceValues.dog.juvenile.min"
                    placeholder="最小值"
                    size="large"
                    style="width: 100%"
                  />
                  <span class="separator">-</span>
                  <a-input-number
                    v-model:value="formData.referenceValues.dog.juvenile.max"
                    placeholder="最大值"
                    size="large"
                    style="width: 100%"
                  />
                </div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="age-group">
                <label>成年:</label>
                <div class="value-inputs">
                  <a-input-number
                    v-model:value="formData.referenceValues.dog.adult.min"
                    placeholder="最小值"
                    size="large"
                    style="width: 100%"
                  />
                  <span class="separator">-</span>
                  <a-input-number
                    v-model:value="formData.referenceValues.dog.adult.max"
                    placeholder="最大值"
                    size="large"
                    style="width: 100%"
                  />
                </div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="age-group">
                <label>老年:</label>
                <div class="value-inputs">
                  <a-input-number
                    v-model:value="formData.referenceValues.dog.elderly.min"
                    placeholder="最小值"
                    size="large"
                    style="width: 100%"
                  />
                  <span class="separator">-</span>
                  <a-input-number
                    v-model:value="formData.referenceValues.dog.elderly.max"
                    placeholder="最大值"
                    size="large"
                    style="width: 100%"
                  />
                </div>
              </div>
            </a-col>
          </a-row>
          <div class="copy-paste-buttons">
            <a-button size="small" @click="copyValues('dog')">复制</a-button>
            <a-button size="small" @click="pasteValues('dog')">粘贴</a-button>
          </div>
        </div>

        <!-- 其它类 -->
        <div class="reference-section">
          <h5>其它类</h5>
          <a-row :gutter="16">
            <a-col :span="8">
              <div class="age-group">
                <label>幼年:</label>
                <div class="value-inputs">
                  <a-input-number
                    v-model:value="formData.referenceValues.other.juvenile.min"
                    placeholder="最小值"
                    size="large"
                    style="width: 100%"
                  />
                  <span class="separator">-</span>
                  <a-input-number
                    v-model:value="formData.referenceValues.other.juvenile.max"
                    placeholder="最大值"
                    size="large"
                    style="width: 100%"
                  />
                </div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="age-group">
                <label>成年:</label>
                <div class="value-inputs">
                  <a-input-number
                    v-model:value="formData.referenceValues.other.adult.min"
                    placeholder="最小值"
                    size="large"
                    style="width: 100%"
                  />
                  <span class="separator">-</span>
                  <a-input-number
                    v-model:value="formData.referenceValues.other.adult.max"
                    placeholder="最大值"
                    size="large"
                    style="width: 100%"
                  />
                </div>
              </div>
            </a-col>
            <a-col :span="8">
              <div class="age-group">
                <label>老年:</label>
                <div class="value-inputs">
                  <a-input-number
                    v-model:value="formData.referenceValues.other.elderly.min"
                    placeholder="最小值"
                    size="large"
                    style="width: 100%"
                  />
                  <span class="separator">-</span>
                  <a-input-number
                    v-model:value="formData.referenceValues.other.elderly.max"
                    placeholder="最大值"
                    size="large"
                    style="width: 100%"
                  />
                </div>
              </div>
            </a-col>
          </a-row>
          <div class="copy-paste-buttons">
            <a-button size="small" @click="copyValues('other')">复制</a-button>
            <a-button size="small" @click="pasteValues('other')">粘贴</a-button>
          </div>
        </div>
      </div>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import type { FormInstance } from 'ant-design-vue';

// 类型定义
interface InspectionCategory {
  id: string;
  name: string;
  description?: string;
}

interface InspectionItem {
  id: string;
  name: string;
  unit: string;
  standardName: string;
  description: string;
  categoryId: string;
  referenceValues: {
    cat: {
      juvenile: { min: number; max: number };
      adult: { min: number; max: number };
      elderly: { min: number; max: number };
    };
    dog: {
      juvenile: { min: number; max: number };
      adult: { min: number; max: number };
      elderly: { min: number; max: number };
    };
    other: {
      juvenile: { min: number; max: number };
      adult: { min: number; max: number };
      elderly: { min: number; max: number };
    };
  };
}

// Props
interface Props {
  open: boolean;
  item?: InspectionItem | null;
}

const props = withDefaults(defineProps<Props>(), {
  open: false,
  item: null,
});

// Emits
const emit = defineEmits<{
  'update:open': [value: boolean];
  save: [item: InspectionItem]
}>();

// 响应式数据
const formRef = ref<FormInstance>();
const loading = ref(false);
const copiedValues = ref<any>(null);

// 分类数据
const categories = ref<InspectionCategory[]>([
  { id: '1', name: '血常规' },
  { id: '2', name: '尿常规' },
  { id: '3', name: '生化检验' },
  { id: '4', name: '内分泌及快速检测' },
  { id: '5', name: '电解质及血液气体分析' },
]);

// 表单数据
const formData = ref<Omit<InspectionItem, 'id'>>({
  name: '',
  unit: '',
  standardName: '',
  description: '',
  categoryId: '',
  referenceValues: {
    cat: {
      juvenile: { min: 0, max: 0 },
      adult: { min: 0, max: 0 },
      elderly: { min: 0, max: 0 },
    },
    dog: {
      juvenile: { min: 0, max: 0 },
      adult: { min: 0, max: 0 },
      elderly: { min: 0, max: 0 },
    },
    other: {
      juvenile: { min: 0, max: 0 },
      adult: { min: 0, max: 0 },
      elderly: { min: 0, max: 0 },
    },
  },
});

// 表单验证规则
const formRules = {
  name: [{ required: true, message: '请输入指标名称',trigger: 'blur' }],
  unit: [{ required: true, message: '请输入指标单位',trigger: 'blur' }],
  standardName: [
    { required: true, message: '请输入标准名称',trigger: 'blur' },
  ],
  categoryId: [
    { required: true, message: '请选择所属分类',trigger: 'change' },
  ],
};

// 计算属性
const isEdit = computed(() => !!props.item);

// 方法
const resetForm = () => {
  formData.value = {
    name: '',
    unit: '',
    standardName: '',
    description: '',
    categoryId: '',
    referenceValues: {
      cat: {
        juvenile: { min: 0, max: 0 },
        adult: { min: 0, max: 0 },
        elderly: { min: 0, max: 0 },
      },
      dog: {
        juvenile: { min: 0, max: 0 },
        adult: { min: 0, max: 0 },
        elderly: { min: 0, max: 0 },
      },
      other: {
        juvenile: { min: 0, max: 0 },
        adult: { min: 0, max: 0 },
        elderly: { min: 0, max: 0 },
      },
    },
  };
};

const copyValues = (type: 'cat' | 'dog' | 'other') => {
  copiedValues.value = JSON.parse(
    JSON.stringify(formData.value.referenceValues[type]),
  );
};

const pasteValues = (type: 'cat' | 'dog' | 'other') => {
  if (copiedValues.value) {
    formData.value.referenceValues[type] = JSON.parse(
      JSON.stringify(copiedValues.value),
    );
  }
};

const handleSave = async () => {
  try {
    await formRef.value?.validate();
    loading.value = true;

    const item: InspectionItem = {
      id: props.item?.id || '',
      ...formData.value,
    };

    emit('save', item);
    emit('update:open', false);
  } catch (error) {
    console.error('表单验证失败:', error);
  } finally {
    loading.value = false;
  }
};

const handleCancel = () => {
  emit('update:open', false);
  resetForm();
};

// 监听props变化
watch(
  () => props.open,
  (newVal) => {
    if (newVal && props.item) {
      // 编辑模式，填充表单数据
      formData.value = { ...props.item };
    } else if (newVal) {
      // 新增模式，重置表单
      resetForm();
    }
  },
  { immediate: true },
);
</script>

<style scoped>
.form-section {
  margin-bottom: 24px;
}

.form-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 8px;
}

.reference-section {
  margin-bottom: 24px;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
}

.reference-section h5 {
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.age-group {
  margin-bottom: 12px;
}

.age-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #666;
}

.value-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.separator {
  color: #999;
  font-weight: 500;
}

.copy-paste-buttons {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

:deep(.ant-form-item) {
  margin-bottom: 16px;
}

:deep(.ant-input-number) {
  width: 100%;
}
</style>
